/**
 * Created by gengrong on 16/4/18.
 */
import { Panel, LayerLink, FormModal } from 'comps/common';
import { Form, Input, Button, Table, Icon } from 'antd';
import * as React from 'react';
import RunnableGroupForm from '../containers/runnable-group-form';
import RunnableGroup from 'comps/runnable-group';

const FormItem = Form.Item;

class RunnableGroupSearchForm extends React.Component {
  onSubmit(evt) {
    evt.preventDefault();
    this.props.onSearchSubmit(this.props.form.getFieldsValue());
  }

  render() {
    const getFieldProps = this.props.form.getFieldProps;

    return (
      <Form className='search-form' inline onSubmit={::this.onSubmit}>
        <FormItem label='查询：'>
          <Input style={{ width: '300px' }} placeholder='可输入名称进行查询' {...getFieldProps('key')}/>
        </FormItem>
        <Button htmlType='submit' type='primary'><Icon type='search'/>搜索</Button>
      </Form>
    );
  }
}

RunnableGroupSearchForm = Form.create()(RunnableGroupSearchForm);

class RunnableGroupManageList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1
    };
  }

  addRunnableGroup() {
    this.refs.runnableGroupModal.show();
  }

  afterSaveRunnableGroup() {
    const query = this.refs.searchForm.getFieldsValue();
    return this.props.onSearchSubmit(query);
  }

  render() {
    const { users = {}, onSearchSubmit } = this.props;
    const { list = [], total } = users;

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      }, {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        render: (name, group) => {
          return <LayerLink component={RunnableGroup} data={{ id: group.id }} title={`项目（${name}）详情`}>{name}</LayerLink>;
        }
      }, {
        title: '项目描述',
        dataIndex: 'desc',
        key: 'desc'
      }, {
        title: '是否公开',
        dataIndex: 'public',
        key: 'public',
        render: p => p ? '公开' : '私有'
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (status) => {
          return {
            OK: '正常',
            LOCK: '已锁定'
          }[status];
        }
      }
    ];

    const pagination = {
      total,
      current: this.state.currentPage,
      onChange: (pageNo) => {
        const query = {
          ...this.refs.searchForm.getFieldsValue(),
          pageNo
        };
        this.props.onSearchSubmit(query)
          .then(() => {
            this.setState({ currentPage: pageNo });
          });
      }
    };

    return (
      <Panel>
        <RunnableGroupSearchForm ref='searchForm' onSearchSubmit={onSearchSubmit}/>
        <Button type='primary' style={{ marginBottom: '20px' }} onClick={::this.addRunnableGroup}><Icon
          type='share-alt'
        />新建项目</Button>
        <Table className='runnable-group-manage-list' dataSource={list} columns={columns} pagination={pagination} rowKey={it => it.id}/>
        <FormModal title='新建项目' ref='runnableGroupModal' form={RunnableGroupForm}
          afterSubmit={::this.afterSaveRunnableGroup}
          width='600'
        />
      </Panel>
    );
  }
}

export default RunnableGroupManageList;
